# Usage

The Checkbox component maps to a checkbox input and a label.

<br />
<br />

## Checkbox states

```jsx
<Pane>
  <Checkbox label="Checkbox default" />
  <Checkbox indeterminate label="Checkbox indeterminate" />
  <Checkbox checked label="Checkbox checked" />
  <Checkbox disabled label="Checkbox disabled" />
  <Checkbox disabled checked label="Checkbox checked disabled" />
  <Checkbox disabled indeterminate label="Checkbox indeterminate disabled" />
</Pane>
```

## Controlled usage

The Checkbox component passes on the original event through the `onChange` handler.
Use `e.target.checked` to get the latest value and update state accordingly.

```jsx
function ControlledCheckboxExample() {
  const [checked, setChecked] = React.useState(true)
  return (
    <Checkbox
      label="Controlled usage"
      checked={checked}
      onChange={e => setChecked(e.target.checked)}
    />
  )
}
```